<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${ruleForm.processName || '工序'}-无单排产`"
		width="1100px"
		:show-content-loading="showContentLoading"
		:confirm-btn-loading="confirmBtnLoading"
		@on-visible-change="onVisibleChange"
		@on-cancel="onVisibleChange(false)"
		@on-confirm="onConfirmBtn"
	>
		<div :style="{height: `${dialogTableHeight}px`}" style="overflow: auto;">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="pageType === 'detail'" label-width="100px" :show-message="false">
				<div class="margin-bottom-4">
					<el-tag type="primary" effect="plain">
						<span class="el-icon-tickets item-gap"></span>
						<span>基本信息</span>
					</el-tag>
				</div>
				<jk-card>
					<el-row class="flex-start-center-wrap">
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="品种" prop="productId">
								<remoteSearchProductInput
									placeholder="品种"
									only-key="productId"
									query-name="productName"
									:form-data="ruleForm"
									@on-select="onSelectProductChange"
								></remoteSearchProductInput>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="批号">
								<span v-if="pageType === 'detail' || ruleForm.auditState > 0" class="read-only-2">{{ ruleForm.batchCode }}</span>
								<remote-search-batch-code-input
									v-else
									:disabled="!ruleForm.productId"
									placeholder="批号"
									only-key="batchId"
									query-name="batchCode"
									:form-data="ruleForm"
									@on-select="onSelectBatchChange"
								></remote-search-batch-code-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="margin-bottom-10" label="排产数量">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.productionQty }}</span>
								<jk-number-input v-else v-model="ruleForm.productionQty" placeholder="排产数量"></jk-number-input>
							</el-form-item>
						</el-col>
					</el-row>

					<jk-divider-card title="排产信息" class="margin-top-10">
						<el-row class="flex-start-center-wrap">
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" label="定量(g/m)">
									<div class="flex-start">
										<span v-if="pageType === 'detail' || ruleForm.auditState === 3" class="read-only-2">{{ ruleForm.gramWeight }}</span>
										<jk-number-input v-else v-model="ruleForm.gramWeight" style="width: 100%;" placeholder="克重" @change="onGramWeightChange($event, 'gramWeight')" />
										<span>~</span>
										<span v-if="pageType === 'detail' || ruleForm.auditState === 3" class="read-only-2">{{ ruleForm.meters }}</span>
										<jk-number-input v-else v-model="ruleForm.meters" style="width: 100%;" placeholder="米长" @change="onGramWeightChange($event, 'meters')" />
									</div>
								</el-form-item>
							</el-col>
							<!--输入颜色-->
							<el-col v-if="ruleForm.processCode.toUpperCase() !== 'SM'" :span="8">
								<el-form-item class="margin-bottom-10" :label="getColorInfoByProcess(ruleForm.processCode).inputName">
									<checkboxPopover
										:title="getColorInfoByProcess(ruleForm.processCode).inputName"
										:default-list.sync="ruleForm.inputTubeColorList"
										:option-list="inputTubeColorList"
										@change="onToggleColorChange($event, 'inputTubeColorList')"
									></checkboxPopover>
								</el-form-item>
							</el-col>
							<!--输出颜色-->
							<el-col :span="8">
								<el-form-item class="margin-bottom-10" :label="getColorInfoByProcess(ruleForm.processCode).outName">
									<checkboxPopover
										:title="getColorInfoByProcess(ruleForm.processCode).outName"
										:default-list.sync="ruleForm.outputTubeColorList"
										:option-list="outTubeColorList"
										@change="onToggleColorChange($event, 'outputTubeColorList')"
									></checkboxPopover>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="日供货量" prop="productionDailyQty1">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.productionDailyQty }}</span>
									<jk-number-input v-else v-model="ruleForm.productionDailyQty" placeholder="日供货量"></jk-number-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="区域">
									<span class="read-only-2">{{ ruleForm.workshopName }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</jk-divider-card>
				</jk-card>
				<!--<div>
					<el-tag type="primary" effect="plain" class="margin-bottom-4 margin-top-10">
						<span class="el-icon-paperclip item-gap"></span>
						<span>工艺信息</span>
					</el-tag>
					<jk-card>
						<el-row class="flex-start-center-wrap">
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="品种工艺单">
									<span v-if="pageType === 'detail' || ruleForm.auditState === 3" class="read-only-2">{{ ruleForm.specSheetCode }}</span>
									<remote-search-technology-order-input
										v-else
										:disabled="!ruleForm.productId"
										placeholder="用户工艺编号"
										only-key="specSheetId"
										query-name="specSheetCode"
										:form-data="ruleForm"
										@on-select="onSelectTechnologyOrderChange"
									></remote-search-technology-order-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="设备机型">
									<span class="read-only-2">{{ ruleForm.machineModelName }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item class="margin-bottom-0" label="台日单产">
									<span v-if="pageType === 'detail' || ruleForm.auditState === 3" class="read-only-2">{{ ruleForm.dailyYield }}</span>
									<jk-number-input v-else v-model="ruleForm.dailyYield" :disabled="!!ruleForm.specSheetId" style="width: 100%;" placeholder="台日单产" @change="onDailyYieldChange" />
								</el-form-item>
							</el-col>
						</el-row>
					</jk-card>
				</div>-->
				<div class="flex-start-center margin-bottom-4 margin-top-10" style="align-items: flex-end">
					<el-button v-if="pageType !== 'detail'" class="item-gap" type="primary" size="mini" icon="el-icon-plus" @click="onAddMachineBtn">生产机台</el-button>
					<span style="font-size: 13px;color: #808695;">(共计: {{ ruleForm.prdNoticeMachineList ? ruleForm.prdNoticeMachineList.length : 0 }}台)</span>
				</div>
				<div v-if="!showContentLoading">
					<notice-machine-list
						:height="0"
						:process-code="ruleForm.processCode"
						:page-type="pageType"
						:input-color-list="inputTubeColorList"
						:show-input-color="false"
						:out-color-list="outTubeColorList"
						:machine-list.sync="ruleForm.prdNoticeMachineList"
					></notice-machine-list>
				</div>
			</el-form>
			<select-machine-gantt-dialog
				:form-data="ruleForm"
				:checked-data="checkMachineData"
				:dialog-state="selectMachineGanttDialogState"
				@on-visible-change="onVisibleChangeOfSelectMachineGanttDialog"
				@on-confirm="onConfirmBtnOfSelectMachineGanttDialog"
			></select-machine-gantt-dialog>
		</div>
	</jk-dialog>
</template>
<script>
    import formMixin from './form-mixin';
    import calDialogHeight from '../../../../../mixins/cal-dialog-height';
    export default {
        name: 'NoOrderProductionDialog',
        mixins: [formMixin, calDialogHeight],
        props: {

        },
        data() {
            return {};
        },
        methods: {
        }
    };
</script>
